<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录界面</title>
    <link rel="icon" href="/images/3.ico" type="image/x-icon">
    <link href="https://fonts.googlefonts.cn/css?family=Lato" rel="stylesheet">
    <link href="https://fonts.font.im/css?family=Hanalei+Fill" rel="stylesheet">
<!--    <link rel="stylesheet" href="./ifconfont/iconfont.css">-->

    <style>
    body{
      background-image: url(/images/1.jpg);
      background-size: 100%;
      margin:0;
      height: 100vh;
      width: 10vm;
      overflow: hidden;
      display: flex;
      align-items: center;
      color: white;
      font-family: 'Hanalei Fill', cursive;
      font-weight: 300;
      /* background: linear-gradient(to left bottom,#e9e9e9,#ebebeb,#d6d6d6,#b1b1b1,#505050); */
    }
    .login-div{
      filter: blur(0.4px);
      background-image: url(/images/2.jpeg);
      margin:0 auto;
      width: 430px;
      height: 650px;
      padding: 60px 35px 35px 35px;
      border-radius: 10px;
      /* background: radial-gradient(circle,#555555,#535353,#505050,#4e4e4e,#4c4c4c); */
      box-shadow: 
      0px 20px 20px rgba(0, 0, 0, 0.2),
      0px 5px 10px rgba(0, 0, 0, 0.2),
      0px 70px 50px rgba(0, 0, 0, 0.4),
      30px 50px 50px rgba(0, 0, 0, 0.2),
      -30px 50px 50px rgba(0, 0, 0, 0.2),
      inset 20px 0px 60px rgba(0, 0, 0, 0.1),
      inset -20px 0px 60px rgba(0, 0, 0, 0.1);
    }
    .login{
      background-image: url(/images/7.png);
      width:89px;
      height: 89px;
      border-radius: 50%;
      margin: 0 auto;
      box-shadow: 1px 1px 2px rgba(0, 0, 0,0.1);
    }
  .title{
    text-align: center;
    font-size: 28px;
    padding-top: 24px;
    letter-spacing: 0.5px;
  }
  .sub-title{
    text-align: center;
    font-size: 15px;
    padding-top: 7px;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: bold;
  }
  .fields{
    width: 100%;
    padding: 100px 5px 30px 5px;
  }
  .fields input{
    border: none;
    outline: none;
    background: none;
    font-size: 18px;
    /*font-family: 'Lato', sans-serif;*/
    color: white;
    padding: 10px 10px 10px 5px;
  }
  .username,.password{
    display: block;
    border-bottom: 1px solid #b3b3b3;
    margin-bottom: 30px;
  }
  ::placeholder{
    color: white;
    opacity: 1;
    font-size: 20px;
    font-weight: 300;
  }

  .signin-button{
    outline: none;
    border: none;
    cursor: pointer;
    width: 100%;
    height: 60px;
    border-radius: 5px;
    font-size: 22px;
    /*font-family: 'Lato', sans-serif;*/
    color: white;
    text-align: center;
    letter-spacing: 1px;
    background: radial-gradient(circle,#24cfaa,#26c5a3,#28bb9c,#29b294,#2aa88d);
    box-shadow: 1px 1px 2px rgba(0, 0, 0,0.1)
  }
  .signin-button:hover{
    background:radial-gradient(circle,#2fdbb6,#32d5b3,#32c9a8,#36c7a7,#38bb9f) ;
  }
  .signin-button:active{
    background:radial-gradient(circle,#1da88a,#1ea084,#229c82,#23947b,#238d76) ;
  }
  .link{
    padding-top: 20px;
    text-align: center;
    /*font-family: 'Lato', sans-serif;*/
  }
  .link a {
    text-decoration: none;
    color:white;
    font-size: 20px;
  }

    </style>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <script src="/js/jquery-3.6.1.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="login-div">
    <div class="login"></div>
    <div class="title">Red Stapler</div>
    <div class="sub-title">Beta</div>
    <div class="fields">
        <div class="username">
          <input type="username" class="user-input" placeholder="Username"id="username" name="username"></div>
        <div class="password">
            <input type="password" class="pass-input" placeholder="Password"id="password" name="password"></div>
    </div>
    <button class="signin-button" onclick="login();">LOG IN</button>
    <div class="link"><a href="#">Forgot password?</a></div>
  </div>
  <script type="text/javascript">


      function login(){

          var name=$("#username").val();
          var password=$("#password").val();

          $.ajax({
              url:"/webapi/login/user",
              data:{
                  username:name,
                  password:password
              }
          }).done(function (rs) {
              if(rs>=0){
                  //成功
                  window.location.href="/student/list";

              }else{
                  alert("出错了，您的用户名和密码是乱写的吗？");
              }

          });
      }
  </script>
</body>
</html>